<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 20px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>

    <div id="root">
        <h1>今天天气很{{day}}</h1>
        <input type="button" value="切换天气" @click="change"><br><br>

    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    isHot: true,

                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }

            },
            computed: {
                day() {
                    return this.isHot ? "炎热" : "凉爽";
                }

            },

            // 监视属性
            watch: {
                // 正常写法
                // isHot: {
                //     // immediate: true,//初始化时让handler调用一下
                //     // deep: true,//深度监视
                //     // handler说明时候调用？当isHot发生改变的时候调用 并且能获取两个参数 新的值，旧的值
                //     handler(newValue, oldValue) {
                //         console.log("isHot被修改了", newValue, oldValue);
                //     }
                // },
                // 简写 当我们不要配置初始调用和深度监视 只需要handler的时候就可以简写
                // 函数名就是监视的是谁 函数就是handler
                isHot(newValue, oldValue) {
                    console.log("isHot被修改了", newValue, oldValue);
                }
            }
        });

    </script>

</body>

</html>